<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="dialogFormVisible"
      width="60%"
      @close="close"
    >
      <el-descriptions class="margin-top" :column="4" :size="size">
        <el-descriptions-item label="【题型】">
          <span>{{
            info.questionType === '1'
              ? '单选题'
              : info.questionType === '2'
              ? '多选题'
              : '简答题'
          }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="【编号】">{{
          info.id
        }}</el-descriptions-item>
        <el-descriptions-item label="【难度】">
          <span>{{
            info.difficulty === '1'
              ? '简单'
              : info.difficulty === '2'
              ? '一般'
              : '困难'
          }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="【标签】">
          {{ info.tags }}</el-descriptions-item
        >
        <el-descriptions-item label="【学科】">{{
          info.subjectName
        }}</el-descriptions-item>
        <el-descriptions-item label="【目录】">{{
          info.directoryName
        }}</el-descriptions-item>
        <el-descriptions-item label="【方向】">{{
          info.direction
        }}</el-descriptions-item>
      </el-descriptions>
      <hr />
      <el-descriptions class="margin-top" :column="1" :size="size">
        <el-descriptions-item label="【题干】">
          <span v-html="info.question" style='color:blue'></span>
          <div> 选项：（以下选中的选项为正确答案）</div>
        </el-descriptions-item>
      </el-descriptions>
      <hr />
      <el-descriptions class="margin-top" :column="1" :size="size">
        <el-descriptions-item label="【参考答案】">
          <div class="videos">视频答案预览</div>
        </el-descriptions-item>
      </el-descriptions>
      <hr />
      <el-descriptions class="margin-top" :column="1" :size="size">
        <el-descriptions-item label="【答案解析】">
          <div v-html="info.answer" style='margin-top:-15px'></div
        ></el-descriptions-item>
      </el-descriptions>
      <hr />
      <el-descriptions class="margin-top" :column="1" :size="size">
        <el-descriptions-item label="【题目备注】">{{info.remarks}}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'articlesPreviews',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    info: [Object, String]
  },
  data () {
    return {
      size: ''
    }
  },
  methods: {
    close () {
      this.$emit('update:dialogFormVisible', false)
    }
  }
}
</script>

<style scoped lang="less">
  .videos {
    display: inline-block;
    width: 115px;
    height: 30px;
    background-color: #f56c6c;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    text-align: center;
    line-height: 30px;
  }
.dialog-footer{
  float: right;
  margin-top: -30px;
}
</style>
